<!-- 库存 -->
<template>
    <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="ScriptID" label="id" width="180" />
        <el-table-column prop="name" label="名称" width="180" />
        <el-table-column prop="address" label="订单编号" />
        <el-table-column prop="name" label="购入时间" width="180" />
        <el-table-column prop="name" label="购入金额" width="180" />
        <el-table-column prop="name" label="经手人" width="180" />
        <!-- 键入删除原因,弹框输入删除原因 -->
        <el-table-column prop="name" label="操作" width="180">
            <template #default>

                <el-button size="small" text @click="dialogFormVisible = true" type="primary">删除</el-button>

                <el-dialog v-model="dialogFormVisible" title="确认删除?">
                    <el-form :model="form">
                        <el-form-item label="删除原因" :label-width="formLabelWidth">
                            <el-input v-model="form.deleteReason" autocomplete="off" />
                        </el-form-item>
                    </el-form>
                    <template #footer>
                        <span class="dialog-footer">
                            <el-button @click="dialogFormVisible = false">取消</el-button>
                            <el-button type="primary" @click="dialogFormVisible = false">确认</el-button>
                        </span>
                    </template>
                </el-dialog>
            </template>
        </el-table-column>

    </el-table>
</template>

<script setup>
import { reactive, ref } from 'vue'

// 表格
const tableData = [
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
        address: 'No. 189, Grove St, Los Angeles',
    }
]


// 删除弹框
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const form = reactive({
    deleteReason: '',
})
</script>

<style scoped>
.el-button--text {
    margin-right: 15px;
}

.el-input {
    width: 300px;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>
